<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { computed } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const route = useRoute()
console.log(route, 'route')
const userandrole = ['userManage', 'roleManage', 'studemo62', 'login']

const elementUiAdminMenu = [...userandrole]

const isRouteStudemo61 = computed(() => {
  return elementUiAdminMenu.includes(route.name as string)
})
</script>

<template>
  <header v-if="!isRouteStudemo61">
    <div class="wrapper">
      <!-- <nav>
        <RouterLink v-for="item in routeList" :key="item.name" :to="{ path: item.path }">{{
          item.title || item.name
        }}</RouterLink>
      </nav> -->
      <hr />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <br><br><span>选项式API和组合式API</span><br>
        <RouterLink to="/studemo01">OptionsAPI</RouterLink>
        <RouterLink to="/studemo02">Composition API</RouterLink>
        <br><br><span>组合式 API (Composition API)详解</span><br>
        <RouterLink to="/studemo03">setup 基本使用</RouterLink>
        <RouterLink to="/studemo04">setup 的返回值 返回一个对象</RouterLink>
        <RouterLink to="/studemo05">setup 的返回值 返回一个函数</RouterLink>
        <RouterLink to="/studemo06">setup 语法糖</RouterLink>
        <br><br><span>vue模板语法</span><br>
        <RouterLink to="/studemo11">vue模板语法1</RouterLink>
        <RouterLink to="/studemo12">vue模板语法2</RouterLink>
        <RouterLink to="/studemo13">vue模板语法3</RouterLink>
        <RouterLink to="/studemo14">vue模板语法4</RouterLink>
        <br><br><span>响应式基础</span><br>
        <RouterLink to="/studemo21">ref()1</RouterLink>
        <RouterLink to="/studemo22">ref()2</RouterLink>
        <RouterLink to="/studemo23">reactive()</RouterLink>
        <RouterLink to="/studemo24">额外的 ref 解包细节</RouterLink>
        <br><br><span>计算属性</span><br>
        <RouterLink to="/studemo31">基础示例</RouterLink>
        <RouterLink to="/studemo32">计算属性缓存vs方法</RouterLink>
        <RouterLink to="/studemo33">可写计算属性</RouterLink>
        <br><br><span>Class 与 Style 绑定</span><br>
        <RouterLink to="/studemo41">绑定 HTML class</RouterLink>
        <RouterLink to="/studemo42">绑定内联样式</RouterLink>
        <br><br><span>渲染</span><br>
        <RouterLink to="/studemo51">条件渲染</RouterLink>
        <RouterLink to="/studemo52">列表渲染</RouterLink>
        <br><br><span>组件开发</span><br>
        <RouterLink to="/studemo61">组件开发1</RouterLink>
        <RouterLink to="/studemo62">组件开发2</RouterLink>
        <br><br><span>学习</span><br>
        <RouterLink to="/studemos1">10.10</RouterLink>
        <RouterLink to="/studemos2">10.12</RouterLink>
        <br><br><span>vue项目</span><br>
        <RouterLink to="/studydemo1">项目1-学生管理系统</RouterLink>
        <br><br><span>接口测试</span><br>
        <RouterLink to="/jiekou1">接口测试1</RouterLink>
        <RouterLink to="/jiekou2">接口测试2</RouterLink>
        <br><br><span>用户管理</span><br>
        <RouterLink to="/login">用户登入</RouterLink>
        <br><br><span>文件上传</span><br>
        <RouterLink to="/fileupload1">文件上传1</RouterLink>
        <RouterLink to="/fileupload2">文件上传2</RouterLink>
        <RouterLink to="/fileupload3">文件上传3</RouterLink>
        <RouterLink to="/fileupload4">文件上传4</RouterLink>
        <RouterLink to="/fileupload5">文件上传5</RouterLink>
      </nav>
    </div>
  </header>

  <el-config-provider :locale="zhCn">
    <RouterView />
  </el-config-provider>


</template>

<style scoped lang="scss">
header {
  padding: 30px 0;
}

nav {
  width: 100%;
  font-size: 16px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    color: #1e80ff;
    margin: 5px;
    border: 1px solid #90909055;
    border-radius: 10px
  }
}

.wrapper {
  border-bottom: 1px solid #909090;
  padding-bottom: 30px;
}
</style>
